<template>
  <div class="container">
    <div class="mt_20 mb_20" v-for="item in list">
      订单号:{{ item.orderNo }}
      <steps
        :currentStep="item.currentStep"
        :totalSteps="item.totalSteps"
        :stepsData="item.stepsData"
        @querySubList="querySubList"
      />
    </div>
    <el-dialog :visible.sync="numDialog" width="500px">
      <template>
        <el-table :data="subList" height="250">
          <el-table-column fixed prop="specs" label="规格" width="150">
          </el-table-column>
          <el-table-column fixed prop="okNum" label="Ok数量" width="150">
          </el-table-column>
          <el-table-column fixed prop="ngNum" label="NG数量" width="150">
          </el-table-column>
        </el-table> </template
    ></el-dialog>
  </div>
</template>

<script>
import api from "../../../api";
import steps from "../order/steps";
// import { use } from "vue/types/umd";

export default {
  name: "orderList",
  components: {
    steps,
  },
  data() {
    return {
      list: [],
      subList: [],
      numDialog: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    querySubList(orderNo, production) {
      console.info(orderNo);
      console.info(production);
      api
        .subNum({
          orderNo: orderNo,
          production: production,
        })
        .then((res) => {
          this.numDialog = true;
          this.subList = res.data;
        });
    },
    getData() {
      this.isLoading = true;
      api
        .ordersProductionRecord({ pageNum: 1, pageSize: 4 })
        .then((res) => {
          console.info("结果", res);

          for (var i = 0; i < res.data.length; i++) {
            var itemList = res.data[i];
            var it = {};
            var newItemList = [];
            var currentStep = 0;
            var orderNo = "";
            for (let i = 0; i < itemList.length; i++) {
              const element = itemList[i];
              orderNo = element.orderNo;
              const time =
                element.startTime && element.endTime
                  ? element.startTime + "~" + element.endTime
                  : element.startTime && !element.endTime
                  ? element.startTime
                  : "";
              if (element.status == "1") currentStep = i + 1;
              newItemList.push({
                label: element.production,
                desc: time,
                orderNo: element.orderNo,
                total: element.total,
                ngNumStr: element.ngNumStr,
                hasDone: element.hasDone,
                toBeCompleted: element.toBeCompleted,
                status: element.status,
              });

              // if (element.status == "2") this.currentStep = i + 1;
            }
            it.orderNo = orderNo;
            it.stepsData = newItemList;
            it.currentStep = currentStep;
            it.totalSteps = itemList.length;
            this.list.push(it);
          }
          console.info("list", this.list);
        })
        .catch((this.isLoading = false));
    },
  },
};
</script>

<style scoped lang="less">
.upload-demo {
  height: 32px;
  display: inline-block;
  margin-left: 10px;
}
</style>
